<template>
  <div class="app-container">
    <!-- 筛选条件 -->
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      :inline="true"
      label-width="70px"
      label-position="left"
    >
      <!-- <el-form-item label="渠道ID" prop="channelId">
        <el-input v-model="queryParams.channelId"  placeholder="请输入乙方渠道id" clearable @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <el-form-item label="渠道名称" prop="">
        <ChannelInput
          ref="ChannelInput"
          :channel-name="'B'"
          @selectChannel="selectChannel"
        />
      </el-form-item>

      <el-form-item label="日期时间" prop="endTime">
        <div class="r_flex">
          <el-date-picker
            v-model="queryParams.alltime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            @change="changtime"
          />
        </div>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon-refresh-left" size="mini" @click="getList"
          >刷新</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-col>
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>

    <!-- 表格数据 -->
    <el-table
      v-if="refreshTable"
      v-loading="loading"
      stripe
      border
      :data="businessList"
      :default-expand-all="isExpandAll"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :header-cell-style="{
        background: $store.state.app.theme.tableBack,
        color: $store.state.app.theme.tableColor,
      }"
      @cell-dblclick="celldblclick"
    >
      <!-- -------的设备是IOS的占比-渠道支出（签约价格*UV总量-渠道盈利（H5申请成功数量*（大额贷（单价）+急速贷（单价）） -->
      <el-table-column
        width="190px"
        label="日期"
        align="center"
        prop="startTime"
      />
      <el-table-column
        width="120px"
        label="渠道ID"
        align="center"
        prop="channelId"
      />
      <el-table-column
        label="渠道名称"
        align="center"
        prop="channelName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="120px"
        label="计费方式"
        align="center"
        prop="signType"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.signType === 1">uv</div>
          <div v-if="scope.row.signType === 2">cpa</div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="120px"
        label="计费单价"
        align="center"
        prop="price"
      />
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="120px"
        label="估总成本"
        align="center"
        prop="pay"
      />
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="120px"
        label="估总收益"
        align="center"
        prop="profits"
      />
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="120px"
        label="估总盈亏"
        align="center"
        prop="signType"
      >
        <template slot-scope="scope">
          <div>{{ (scope.row.profits - scope.row.pay).toFixed(2) }}</div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="120px"
        label="UV"
        align="center"
        prop="uv"
      />
      <el-table-column
        width="120px"
        label="注册量"
        align="center"
        prop="registNum"
      />
      <!-- <el-table-column width="120px" label="登陆量" align="center" prop="signType">
        <template slot-scope="">
          <div> 无 </div>
        </template>
      </el-table-column> -->
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="120px"
        label="表单完件量"
        align="center"
        prop="lzNum"
      />
      <!-- <el-table-column width="120px" label="表单达标量" align="center" prop="">
        <template slot-scope="">
          <div> 无 </div>
        </template>
      </el-table-column> -->
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="120px"
        label="表单成交量"
        align="center"
        prop="applysNum"
      />
      <!-- <el-table-column width="120px" label="表单成交均价" align="center" prop="">
        <template slot-scope="">
          <div> 无 </div>
        </template>
      </el-table-column> -->
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="120px"
        label="估表单总收益"
        align="center"
        prop="applysPrice"
      />
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="120px"
        label="线上申请量"
        align="center"
        prop="jisuProductClick"
      />
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="120px"
        label="均线上单UV收益"
        align="center"
        prop="jisuUvPrice"
      />
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="120px"
        label="估线上总收益"
        align="center"
        prop="jisuProductPrice"
      />
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="120px"
        label="UV-注册率"
        align="center"
        prop="registRate"
      />
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="120px"
        label="注册-表单完件率"
        align="center"
        prop="lzRate"
      />
      <!-- <el-table-column width="120px" label="完件-达标率" align="center" prop="">
        <template slot-scope="">
          <div> 无 </div>
        </template>
      </el-table-column> -->
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="120px"
        label="达标-成交率"
        align="center"
        prop="applysRate"
      />
      <!-- <el-table-column width="120px" label="注册人均表单量" align="center" prop="">
        <template slot-scope="">
          <div> 无 </div>
        </template>
      </el-table-column> -->
      <!-- <el-table-column width="120px" label="注册-登录率" align="center" prop="">
        <template slot-scope="">
          <div> 无 </div>
        </template>
      </el-table-column> -->
      <!-- <el-table-column width="120px" label="注册人均申请量" align="center" prop="">
        <template slot-scope="">
          <div> 无 </div>
        </template>
      </el-table-column> -->
      <!-- <el-table-column width="120px" label="渠道类型" align="center" prop="signType">
        <template slot-scope="scope">
          <div v-if="scope.row.signType === 1"> uv </div>
          <div v-if="scope.row.signType === 2"> cpa </div>
        </template>
      </el-table-column> -->
      <el-table-column width="120px" label="渠道模式" align="center" prop="">
        <template slot-scope="scope">
          <div v-if="scope.row.signType === 1">uv</div>
          <div v-if="scope.row.signType === 2">cpa</div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="120px"
        label="所属人"
        align="center"
        prop="contact"
      />
      <el-table-column width="120px" label="roi" align="center" prop="roi" />
      <el-table-column
        v-if="H5Configuration[0] !== 'channel'"
        width="180px"
        label="备注"
        :show-overflow-tooltip="true"
        align="center"
        prop="remark"
      />
    </el-table>

    <!-- 分页 -->
    <el-row :gutter="24" class="mb8" style="margin: 20px 0px">
      <el-col
        :span="24"
        style="display: flex; justify-content: flex-end; padding: 0px"
      >
        <el-pagination
          background
          layout="prev, pager, next, sizes, total"
          :page-sizes="[10, 50, 100, 200]"
          :page-size="queryParams.pageSize"
          :total="totalPage"
          @current-change="handlePageChange"
          @size-change="
            (newSize) => {
              queryParams.pageSize = newSize;
              getList();
            }
          "
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import { delChannel, getChannel, upChannel, addChannel, templateList } from '@/api/business/system'
import { channelTotal, deptTotal, jisuTotal } from "@/api/business/total";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import ChannelInput from "@/components/ChannelInput";

export default {
  name: "DataBuy",
  components: { ChannelInput },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 修改渠道loading
      submitLoad: false,
      // 显示搜索条件
      showSearch: true,
      // 表格树数据
      businessList: [],
      // 对话框类型
      titleDialog: "",
      // 是否显示对话框
      openDialog: false,
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      // 查询参数
      queryParams: {
        pageNum: 1, // 当前页数
        pageSize: 10, // 分页大小
        // channelId: '',
        channelName: "",
        alltime: [],
        startTime: "",
        endTime: "",
      },
      // 数据总条数
      totalPage: 0,
      // 表单参数
      formDialog: {
        bigProduct: "",
        h5TemplateId: 2,
        invitePage: "",
        name: "",
        productId: "",
        signType: "",
        status: 0,
        tcOpen: "",
        price: "",
        contact: "",
        contactPhone: "",
        // createBy: "",
        // createTime: "",
        // deduct: 0,
        // deductRateId: 0,
        // // id: "",
        // invite: "",
        // inviteUrl: "",
        // // ownerId: 0,
        // ownerName: "",
        // params: {},
        // searchValue: "",
        // updateBy: "",
      },
      // h5模板数组
      H5Array: [],
      // 新增表单校验
      rules: {
        name: [{ required: true, message: "该项不能为空", trigger: "blur" }],
        price: [{ required: true, message: "该项不能为空", trigger: "blur" }],
        signType: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        ownerName: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        invitePage: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        tcOpen: [{ required: true, message: "该项不能为空", trigger: "blur" }],
        inviteUrl: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        contact: [{ required: true, message: "该项不能为空", trigger: "blur" }],
        contactPhone: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        h5TemplateId: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    // H5动态配置项
    H5Configuration() {
      return this.$store.state.user.roles;
    },
  },
  created() {
    // 初始化时间
    this.$set(this.queryParams, "alltime", [
      this.$store.state.app.theme.startTime,
      this.$store.state.app.theme.endTime,
    ]);
    this.$set(
      this.queryParams,
      "startTime",
      this.$store.state.app.theme.startTime
    );
    this.$set(this.queryParams, "endTime", this.$store.state.app.theme.endTime);
    // 初始化筛选参数
    this.cshParameter();
    // 分页数据
    this.getList();
  },
  methods: {
    // 选择渠道
    selectChannel(data) {
      this.$set(this.queryParams, "channelName", data.name);
    },
    // 初始化筛选参数
    cshParameter() {
      if (this.$route.query) {
        this.$set(this.queryParams, "channelName", this.$route.query.name);
      }
    },
    // 时间选择
    changtime(newtime) {
      this.queryParams.startTime = newtime ? newtime[0] : "";
      this.queryParams.endTime = newtime ? newtime[1] : "";
    },
    // 查询列表
    getList() {
      this.loading = true;
      channelTotal(this.queryParams)
        .then((response) => {
          this.businessList = response.records;
          this.totalPage = response.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 新增按钮操作
    handleAdd() {
      if (this.formDialog.id) {
        this.formDialog = this.$options.data().formDialog;
      }
      this.openDialog = true;
      this.titleDialog = "add";
    },
    // 搜索按钮操作
    handleQuery() {
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
      // 初始化时间
      this.$set(this.queryParams, "alltime", [
        this.$store.state.app.theme.startTime,
        this.$store.state.app.theme.endTime,
      ]);
      this.$set(
        this.queryParams,
        "startTime",
        this.$store.state.app.theme.startTime
      );
      this.$set(
        this.queryParams,
        "endTime",
        this.$store.state.app.theme.endTime
      );
      this.$refs.ChannelInput.channelValue = "";
      this.handleQuery();
    },
    // 表单重置
    reset() {
      this.form = {
        parentId: "",
        deptName: "",
        pdAmount: "",
        tag: "",
        leader: "",
        type: "",
        url: "",
        zkStatus: "1",
      };
      this.resetForm("form");
    },
    // 分页请求
    handlePageChange(data) {
      this.queryParams.pageNum = data;
      this.getList();
    },
    // 双击复制
    celldblclick(row, column, cell, event) {
      if (!column.property) return;
      if (!row[column.property]) return;
      const oInput = document.createElement("input");
      oInput.value = row[column.property];
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand("Copy");
      this.$message.success({
        message: "复制成功",
        showClose: true,
      });
      oInput.remove();
    },
  },
};
</script>
